import Vue from 'vue'
import App from './App.vue'

// 1、下载
// 2、引入
import VueRouter from "vue-router"

// 3、注册全局组件
Vue.use(VueRouter)

// 4、创建路由规则
const routes = [
  {
    path: "/",
    redirect: "/Find"
  },
  {
    path: "/Find",
    component: ()=>import("@/views/Find.vue"),
    redirect: "/Find/recommend",
    children: [
      {
        path: "ranking", // 路径前面不需要斜杠
        component: ()=>import("@/views/Second/Ranking.vue")
      },
      {
        path: "recommend", // 路径前面不需要斜杠
        component: ()=>import("@/views/Second/Recommend.vue")
      },
      {
        path: "songlist", // 路径前面不需要斜杠
        component: ()=>import("@/views/Second/SongList.vue")
      }
    ]
  },
  {
    path: "/My",
    component: ()=>import("@/views/My.vue")
  }
]
// 5、生成路由对象
const router = new VueRouter({
  routes
})

// 添加全局前置守卫(路由守卫，导航守卫)
// 前置守卫：就是在路由跳转之前会触发的一个函数，这个函数就是beforEach.
// router.beforeEach((to, from , next)=>{
//   console.log(48, to, from);
//   // to: 表示跳转的目表路由对象
//   // from: 当前的路由对象
//   next() // 调用next方法 页面才能跳转成功
// })
// 需求：已登录 可以跳转到“我的音乐”页面，未登录不可以跳转
let isLogin = false; // 默认没有登录
router.beforeEach((to, from, next)=>{
  // if(to.path === "/My" && !isLogin){
    if(to.path === "/My" && isLogin === false ){
    alert("请登录！");
    next(false)  // 阻止路由跳转
  }else{
    next()
  }
})


// 6、把路由对象注入到vue实例中
new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
